/* 应用样式 */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义样式 */
@layer base {
  * {
    @apply antialiased;
  }
  
  html {
    @apply scroll-smooth;
  }
  
  body {
    @apply bg-gradient-to-br from-purple-50 via-blue-50 to-green-50;
    @apply font-sans text-gray-900;
    @apply overflow-x-hidden;
  }
  
  /* 移动端适配 */
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }
}

@layer components {
  /* 渐变按钮 */
  .btn-gradient {
    @apply bg-gradient-to-r from-purple-600 to-blue-600;
    @apply text-white font-semibold py-3 px-6 rounded-lg;
    @apply shadow-lg hover:shadow-xl;
    @apply transform hover:-translate-y-1;
    @apply transition-all duration-300;
  }
  
  .btn-gradient:hover {
    @apply from-purple-700 to-blue-700;
  }
  
  .btn-gradient:active {
    @apply transform translate-y-0;
    @apply shadow-md;
  }
  
  /* 卡片样式 */
  .card {
    @apply bg-white rounded-xl shadow-lg;
    @apply backdrop-blur-sm bg-white/80;
    @apply border border-white/20;
  }
  
  .card-hover {
    @apply hover:shadow-xl hover:-translate-y-1;
    @apply transition-all duration-300;
  }
  
  /* 输入框样式 */
  .input-primary {
    @apply w-full px-4 py-3;
    @apply border border-gray-300 rounded-lg;
    @apply focus:ring-2 focus:ring-purple-500 focus:border-transparent;
    @apply transition-all duration-200;
    @apply bg-white/80 backdrop-blur-sm;
  }
  
  .input-primary:focus {
    @apply shadow-lg;
  }
  
  /* 文本样式 */
  .text-gradient {
    @apply bg-gradient-to-r from-purple-600 to-blue-600;
    @apply bg-clip-text text-transparent;
  }
  
  /* 动画样式 */
  .animate-gradient {
    background-size: 200% 200%;
    animation: gradient 3s ease infinite;
  }
  
  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  /* 脉冲动画 */
  .animate-pulse-custom {
    animation: pulse-custom 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  @keyframes pulse-custom {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
  }
  
  /* 浮动动画 */
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  
  /* 闪烁动画 */
  .animate-shimmer {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }
  
  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
}

@layer utilities {
  /* 响应式文本 */
  .text-responsive {
    @apply text-sm sm:text-base lg:text-lg;
  }
  
  /* 移动端优化 */
  .touch-manipulation {
    touch-action: manipulation;
  }
  
  /* 滚动条样式 */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  
  /* 渐变边框 */
  .border-gradient {
    border: 1px solid;
    border-image: linear-gradient(45deg, #8b5cf6, #3b82f6) 1;
  }
}

/* PWA 样式 */
@media (display-mode: standalone) {
  body {
    user-select: none;
    -webkit-user-select: none;
  }
  
  .pwa-safe-area {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* 移动端优化 */
@media (max-width: 768px) {
  .mobile-optimized {
    @apply text-sm;
  }
  
  .mobile-padding {
    @apply px-4 py-2;
  }
  
  .mobile-spacing {
    @apply space-y-4;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .card {
    @apply border-2 border-gray-300;
  }
  
  .text-gradient {
    @apply text-purple-800;
    background: none;
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 暗黑模式支持 */
@media (prefers-color-scheme: dark) {
  /* 这里可以添加暗黑模式样式 */
}